<template>
  <div class="settings d-flex justify-center">
    <v-container fluid>
      <!-- 基本信息 -->
      <v-row>
        <v-col cols="9">
          <h1>个人资料设置</h1>
          <h2>基本信息</h2>
          <div class="user-profile">
              <v-text-field
              v-model="userInfo.name"
              :counter="10"
              label="用户名"
            ></v-text-field>

          <v-text-field
            v-model="userInfo.firstWorkTime"
            :counter="12"
            label="开始工作时间"
            @click="triggerDatePicker(true)"
          ></v-text-field>
          <v-text-field
            v-model="userInfo.career"
            label="职业方向"
            :counter="30"
          ></v-text-field>

          <v-text-field
            v-model="userInfo.position"
            label="岗位"
            :counter="30"
          ></v-text-field>

          <v-text-field
            v-model="userInfo.company"
            label="公司"
            :counter="30"
          ></v-text-field>

          <v-text-field
            v-model="userInfo.profile"
            label="个人主页"
            :counter="50"
          ></v-text-field>

          <v-text-field
            v-model="userInfo.profile"
            label="个人介绍"
            :counter="100"
          ></v-text-field>
          </div>
        </v-col>
        <v-col cols="3">
          <!-- TODO:图片裁剪上传 -->
          <div class="d-flex justify-center avatar" @click="triggerInp">
            <input v-show="false" ref="inpRef" type="file" accept="image/*" @change="saveAvatar">
            <v-hover>
              <template #default="{isHovering, props}">
                <v-avatar class="selected" :class="{ active: isHovering }" v-bind="props"
                  :image=" avatarUrl || userInfo.avatar" size="80">
                </v-avatar>
              </template>
            </v-hover>
          </div>
        </v-col>
      </v-row>
      <!-- 兴趣标签 -->
      <v-row>
        <v-col cols="9" >
          <h1>兴趣标签管理</h1>
          <v-sheet
            class="d-flex flex-wrap px-2 py-2"
            :elevation="2"
            :height="200"
            border
            rounded
          >
            <!-- TODO: 实现拖拽排序 -->
            <v-chip draggable variant="outlined" v-for="(tag,idx) in userInfo.interestTags" :key="idx" closable class="mr-2 mt-2" @click:close="removeTag(idx)" >{{ tag }}</v-chip>
          </v-sheet>
        </v-col>
        <v-col cols="3">
          <div class="interest-tags mt-16">
            <!-- 这里可以渲染现有标签 -->
            <!-- <v-chip v-for="(t,i) in userInfo.interestTags" :key="i" class="ma-1">{{ t }}</v-chip> -->
            <v-btn size="small" color="primary" class="ml-2" @click="showAddTagDialog = true">添加标签</v-btn>
          </div>
        </v-col>
      </v-row>
      <!-- 保存按钮 -->
      <v-row>
        <v-col cols="12" class="d-flex justify-center">
          <div class="btn">
            <v-btn color="primary">Save</v-btn>
          </div>
        </v-col>
      </v-row>
    </v-container>

    <v-overlay v-model="datePicker" class="d-flex justify-center align-center">
        <v-date-picker rounded v-show="datePicker" v-model="userInfo.firstWorkTime" @update:modelValue="onDateChange" ></v-date-picker>
    </v-overlay>
    <v-overlay v-model="showAddTagDialog" class="d-flex justify-center align-center">
      <v-dialog
        v-model="showAddTagDialog"
        width="360"
      >
        <v-card class="mx-auto" max-width="620" title="添加兴趣标签">
          <v-card-text>
            <v-text-field
              v-model="newTag"
              label="标签名"
              clearable
              @keydown.enter="confirmAddTag"
            />
          </v-card-text>
          <v-card-actions>
            <v-spacer />
            <v-btn variant="text" @click="closeAddTag">取消</v-btn>
            <v-btn color="primary" @click="confirmAddTag">确认</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-overlay>
  </div>
</template>


<script setup lang="ts">
import dayjs from 'dayjs'

const userInfo = reactive({
  avatar: 'https://community-cdn.exiliumgf.com/prod/image/1751943832251.png',
  name: 'RPK_16V',
  firstWorkTime: '',
  career: '',
  position: '',
  company: '',
  interestTags: ['vue', 'react', 'angular', 'nodejs', 'typescript', 'electron', 'nuxt', 'uni-app', 'nestjs','langchainjs'],
  profile: '',
  intro: ''
})

// 日期处理
const datePicker = ref(false)
const triggerDatePicker = (val: boolean | Event = true) => {
  // 兼容事件对象：只在显式传入 false 时关闭，否则打开
  datePicker.value = val !== false
}
const onDateChange = (val: string) => {
  userInfo.firstWorkTime = dayjs(val).format('YYYY-MM-DD')
  triggerDatePicker(false)
}
// 兴趣标签处理
const removeTag = (idx: number) => {
  userInfo.interestTags.splice(idx, 1)
  console.log(userInfo.interestTags);
}
const showAddTagDialog = ref(false)
const newTag = ref('')

const closeAddTag = () => {
  showAddTagDialog.value = false
  newTag.value = ''
}

const confirmAddTag = () => {
  const tag = newTag.value.trim()
  if (!tag) return closeAddTag()
  // 去重（大小写不敏感）
  const exists = userInfo.interestTags.some((t: string) => t.toLowerCase() === tag.toLowerCase())
  if (!exists) userInfo.interestTags.push(tag)
  closeAddTag()
}

// 图片处理
const inpRef = ref<HTMLInputElement | null>(null)
const triggerInp = () => inpRef.value!.click()
// 临时预览图片
const avatarUrl = ref('')
const saveAvatar = (e: Event) => {
  const target = e.target as HTMLInputElement
  const file = target.files?.[0]
  if (file) avatarUrl.value = URL.createObjectURL(file)
}
const uploadAvatar = () => {}
</script>

<style lang="less" scoped>
.date-picker {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.selected {
  cursor: pointer;
  box-sizing: border-box;
  transition: all 200ms;
  border: 2px solid transparent;
}
.active {
  border: 2px solid #f26c1c;
  position: relative;
  &::after {
    position: absolute;
    content: '+';
    text-align: center;
    line-height: 80px;
    font-size: 40px;
    color: #f1f1f1;
    display: block;
    width: 80px;
    height: 80px;
    opacity: 0.6;
    background-color: darken(#f26c1c, 20%);
  }
}


</style>
